import React, { useContext, useState } from 'react';
import { Typography, Tag, Menu, Popover } from 'antd';
import classNames from 'classnames';
import If from '@/components/If';
import keyBy from 'lodash/keyBy';
import EmptyPlaceHolder from '@/pages/SalaryManage/components/EmptyPlaceHolder';

import Context from '../../context';
import style from './index.less';

const { Text } = Typography;

const NORMAL = 0;
const EDIT = 1;
const ENABLE = 2;
const DISABLE = 3;
const STATE_MAPPER = {
    [NORMAL]: {
        text: '',
        stepClass: ''
    },
    [EDIT]: {
        text: '编辑',
        tag: 'blue',
        stepClass: 'SalaryStepEdit',
        compareStepClass: 'SalaryCompareStepEdit'
    },
    [ENABLE]: {
        text: '启用',
        tag: 'cyan',
        stepClass: 'SalaryStepEnable',
        compareStepClass: 'SalaryCompareStepEnable'
    },
    [DISABLE]: {
        text: '禁用',
        tag: 'red',
        stepClass: 'SalaryStepDelete',
        compareStepClass: 'SalaryCompareStepDelete'
    }
};

const itemModified = item => item.status;

const SalaryStep = ({ index, title, stepInfo, compareStepInfo, prefix }) => {
    const [showDropDown, setShowDropDown] = useState(false);
    const { contextState, setContextState } = useContext(Context);

    const state = stepInfo.status ?? NORMAL;
    const stateVo = STATE_MAPPER[state];
    const compareState = compareStepInfo?.status ?? NORMAL;
    const compareStateVo = STATE_MAPPER[compareState];
    const detail = stepInfo.detail || [];

    const popoverContent = (
        <Menu className={style.dropdownBox}>
            {detail.map((tip, i) => (
                <Menu.Item key={tip.key} className={style.dropdownItem}>
                    <div>
                        <Text type="secondary" className={style.dropdownLabel}>
                            {i + 1}.{tip.key}：
                        </Text>
                        <span
                            className={classNames(style.dropdownValue, { [style.modified]: itemModified(tip) })}
                        ><EmptyPlaceHolder value={`${tip.value}`} /></span>
                    </div>
                </Menu.Item>
            ))}
        </Menu>
    );

    const doMouseEnter = activeStepInfo => {
        setContextState({
            ...contextState,
            activePosition: prefix,
            activeStepInfo,
            oppositeStepInfo: compareStepInfo
        });
    };

    const doMouseLeave = () => {
        setContextState({
            ...contextState,
            activePosition: null,
            activeStepInfo: null,
            activeShowingDropDown: false,
            oppositeStepInfo: null
        });
    };

    const dropDownHover = status => {
        setShowDropDown(status);
        setContextState({
            ...contextState,
            activeShowingDropDown: status
        });
    };

    let isActive = false;
    let showOppositeDropDown = false;
    if (
        contextState.activePosition !== null &&
        contextState.activePosition !== prefix &&
        contextState.oppositeStepInfo !== null &&
        contextState.oppositeStepInfo?.index === stepInfo.index
    ) {
        isActive = true;

        if (contextState.activeShowingDropDown) {
            showOppositeDropDown = true;
        }
    }

    if (
        contextState.activePosition !== prefix &&
        contextState.oppositeStepInfo !== null &&
        contextState.oppositeStepInfo?.index === stepInfo?.index
    ) {
        // setShowDropDown(true);
    }

    return (
        <div
            className={
                classNames(
                    style.SalaryStep,
                    style[stateVo.stepClass],
                    style[compareStateVo.compareStepClass],
                    { [style.active]: isActive }
                )
            }
        >
            <div
                className={classNames(style.stepItem, { [style.active]: isActive })}
                onMouseEnter={() => doMouseEnter(stepInfo)}
                onMouseLeave={() => doMouseLeave(stepInfo)}
            >
                <div className={style.stepIconWrapper}>
                    <i className={style.stepIcon}>{index + 1}</i>
                </div>
                <div className={style.stepText}>
                    <If condition={detail?.length > 0}>
                        <Popover
                            placement="right"
                            mouseEnterDelay={0.3}
                            content={popoverContent}
                            visible={showDropDown || showOppositeDropDown}
                        >
                            <span onMouseEnter={() => dropDownHover(true)} onMouseLeave={() => dropDownHover(false)}>
                                <span className={style.stepTextTitle} style={{ cursor: 'pointer' }}>
                                    {title}
                                </span>
                                <If condition={!!stateVo.text}>
                                    <Tag color={stateVo.tag}>{stateVo.text}</Tag>
                                </If>
                            </span>
                        </Popover>
                    </If>
                    <If condition={!detail?.length}>
                        <span>
                            <span className={style.stepTextTitle}>{title} </span>
                            <If condition={!!stateVo.text}>
                                <Tag color={stateVo.tag}>{stateVo.text}</Tag>
                            </If>
                        </span>
                    </If>
                </div>
            </div>
            <div className={style.stepTail}>
                <div className={style.stepTailIconWrapper}>
                    <i className={style.stepIcon}>&nbsp;</i>
                </div>
                <div className={style.stepTailText}></div>
            </div>
        </div>
    );
};

/**
 *
 * @param {'left' | 'right'} prefix
 * @param {array} data 步骤数据
 * @param {array} compareData 对比数据
 * @returns {JSX.Element}
 * @constructor
 */
const SalaryPayStep = ({ prefix, data, compareData }) => {
    console.log('data:', data);
    const compareDataMap = keyBy(compareData, stepInfo => stepInfo.checkNode);

    return (
        <div className={style.SalaryPaySteps}>
            {data.map((stepVo, index) => (
                <SalaryStep
                    key={stepVo.checkNode}
                    index={index}
                    title={stepVo.title}
                    prefix={prefix}
                    stepInfo={stepVo}
                    compareStepInfo={compareDataMap[stepVo.checkNode]}
                />
            ))}
        </div>
    );
};

export default React.memo(SalaryPayStep);
